<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>小米商城</title>
  <!-- 引入标题图标 -->
  <link rel="icon" href="images/favicon.ico">
  <!-- 引入所有元素的重置样式 -->
  <link rel="stylesheet" href="css/reset.css">
  <!-- 引入图标样式 -->
  <link rel="stylesheet" href="css/iconfont.css">
  <!-- 引入自定义样式 -->
  <link rel="stylesheet" href="css/mi.css">

</head>

<body>
  <!-- 一层一层写结构：从上到下，从外到内  -->
  <!-- 1.头部开始 -->
  <div class="header">
    <div class="wrap">
      <!-- 左侧部分 -->
      <ul class="header-left">
        <li><a href="#">小米官网</a><span>|</span></li>
        <li><a href="#">小米商城</a><span>|</span></li>
        <li><a href="#">MIUI</a><span>|</span></li>
        <li><a href="#">IoT</a><span>|</span></li>
        <li><a href="#">云服务</a><span>|</span></li>
        <li><a href="#">天星数科</a><span>|</span></li>
        <li><a href="#">有品</a><span>|</span></li>
        <li><a href="#">小爱开放平台</a><span>|</span></li>
        <li><a href="#">企业团购</a><span>|</span></li>
        <li><a href="#">资质证照</a><span>|</span></li>
        <li><a href="#">协议规则</a><span>|</span></li>
        <li id="down">
          <a href="#">下载app</a><span>|</span>
          <div id="sanjiao"></div>
          <div class="download">
            <img src="images/download.png" alt="">
            <p>小米商城APP</p>
          </div>
        </li>
        <li><a href="#">Select Location</a></li>
      </ul>
      <!-- 右侧部分 -->
      <ul class="header-right">
        <li><a href="#">登录</a><span>|</span></li>
        <li><a href="#">注册</a><span>|</span></li>
        <li><a href="#">消息通知</a></li>
        <li class="cart">
          <a href="#">
            <i class="iconfont">&#xe653;</i>购物车 (0)
          </a>
          <div class="cart-list">
            购物车中还没有商品，赶紧选购吧！
          </div>
        </li>
      </ul>
    </div>

  </div>
  <!-- 头部结束 -->

  <!-- 2.导航开始 -->
  <div class="nav">
    <div class="wrap">
      <div class="nav-logo">
        <a href="#">
          <img src="images/logo1.png" alt="">
        </a>
      </div>
      <div class="nav-bar">
        <ul>
          <li>
            <a href="#">Xiaomi手机</a>
            <div class="nav-bar-list">
              <div class="wrap">
                <ul>
                  <li>
                    <a href="#">
                      <!-- 使用div的目的是为了给图片添加边框 -->
                      <div class="nav-img-box">
                        <img src="./images/nav-list.png" alt="">
                      </div>
                      <p>Xiaomi Civi</p>
                      <p class="price">2299元起</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <!-- 使用div的目的是为了给图片添加边框 -->
                      <div class="nav-img-box">
                        <img src="./images/nav-list.png" alt="">
                      </div>
                      <p>Xiaomi Civi</p>
                      <p class="price">2299元起</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <!-- 使用div的目的是为了给图片添加边框 -->
                      <div class="nav-img-box">
                        <img src="./images/nav-list.png" alt="">
                      </div>
                      <p>Xiaomi Civi</p>
                      <p class="price">2299元起</p>

                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <!-- 使用div的目的是为了给图片添加边框 -->
                      <div class="nav-img-box">
                        <img src="./images/nav-list.png" alt="">
                      </div>
                      <p>Xiaomi Civi</p>
                      <p class="price">2299元起</p>

                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <!-- 使用div的目的是为了给图片添加边框 -->
                      <div class="nav-img-box">
                        <img src="./images/nav-list.png" alt="">
                      </div>
                      <p>Xiaomi Civi</p>
                      <p class="price">2299元起</p>

                    </a>
                  </li>
                  <li class="li-last">
                    <a href="#">
                      <!-- 使用div的目的是为了给图片添加边框 -->
                      <div class="nav-img-box">
                        <img src="./images/nav-list.png" alt="">
                      </div>
                      <p>Xiaomi Civi</p>
                      <p class="price">2299元起</p>

                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </li>
          <li><a href="#">Redmi红米</a></li>
          <li><a href="#">电视</a></li>
          <li><a href="#">笔记本</a></li>
          <li><a href="#">平板</a></li>
          <li><a href="#">家电</a></li>
          <li><a href="#">路由器</a></li>
          <li><a href="#">服务中心</a></li>
          <li><a href="#">社区</a></li>
        </ul>
      </div>
      <div class="nav-search">
        <input type="text" placeholder="小米手机">
        <button type="button" class="iconfont">&#xe63d;</button>
        <div class="search-list">
          <a href="#">小米手机</a>
          <a href="#">小米手机</a>
          <a href="#">小米手机</a>
          <a href="#">小米手机</a>
          <a href="#">小米手机</a>
          <a href="#">小米手机</a>
          <a href="#">小米手机</a>
          <a href="#">小米手机</a>
        </div>
      </div>

    </div>

  </div>
  <!-- 导航结束 -->

  <!-- 3.banner开始 -->
  <div class="banner">
    <div class="wrap">
      <div class="banner-box">
        <div class="slide">
          <ul>

            <!-- 第一个三级 -->
            <li>
              <a href="#">手机</a>
              <i class="iconfont">&#xe616;</i>
              <div class="slide-list">
                <ul>
                  <!-- 一个ul里面存储多个小li -->
                  <li>
                    <a href="#">
                      <img src="./images/banner-list1.png" alt="">
                      <span>Xiaomi 12S</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/banner-list1.png" alt="">
                      <span>Xiaomi 12S</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/banner-list1.png" alt="">
                      <span>Xiaomi 12S</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/banner-list1.png" alt="">
                      <span>Xiaomi 12S</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/banner-list1.png" alt="">
                      <span>Xiaomi 12S</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/banner-list1.png" alt="">
                      <span>Xiaomi 12S</span>
                    </a>
                  </li>
                </ul>
                <ul>
                  <!-- 一个ul里面存储多个小li -->
                  <li>
                    <a href="#">
                      <img src="./images/banner-list1.png" alt="">
                      <span>Xiaomi 12S</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/banner-list1.png" alt="">
                      <span>Xiaomi 12S</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/banner-list1.png" alt="">
                      <span>Xiaomi 12S</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/banner-list1.png" alt="">
                      <span>Xiaomi 12S</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/banner-list1.png" alt="">
                      <span>Xiaomi 12S</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/banner-list1.png" alt="">
                      <span>Xiaomi 12S</span>
                    </a>
                  </li>
                </ul>
                <ul>
                  <!-- 一个ul里面存储多个小li -->
                  <li>
                    <a href="#">
                      <img src="./images/banner-list1.png" alt="">
                      <span>Xiaomi 12S</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/banner-list1.png" alt="">
                      <span>Xiaomi 12S</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/banner-list1.png" alt="">
                      <span>Xiaomi 12S</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/banner-list1.png" alt="">
                      <span>Xiaomi 12S</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/banner-list1.png" alt="">
                      <span>Xiaomi 12S</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/banner-list1.png" alt="">
                      <span>Xiaomi 12S</span>
                    </a>
                  </li>
                </ul>
                <ul>
                  <!-- 一个ul里面存储多个小li -->
                  <li>
                    <a href="#">
                      <img src="./images/banner-list1.png" alt="">
                      <span>Xiaomi 12S</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/banner-list1.png" alt="">
                      <span>Xiaomi 12S</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/banner-list1.png" alt="">
                      <span>Xiaomi 12S</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/banner-list1.png" alt="">
                      <span>Xiaomi 12S</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/banner-list1.png" alt="">
                      <span>Xiaomi 12S</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/banner-list1.png" alt="">
                      <span>Xiaomi 12S</span>
                    </a>
                  </li>
                </ul>
              </div>
            </li>

            <!-- 第二个三级 -->
            <li>
              <a href="#">手机</a><i class="iconfont">&#xe616;</i>
              <div class="slide-list">
                <ul>
                  <!-- 一个ul里面存储多个小li -->
                  <li>
                    <a href="#">
                      <img src="./images/banner-list2.png" alt="">
                      <span>Redmi X65 2022款</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/banner-list2.png" alt="">
                      <span>Redmi X65 2022款</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/banner-list2.png" alt="">
                      <span>Redmi X65 2022款</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/banner-list2.png" alt="">
                      <span>Redmi X65 2022款</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/banner-list2.png" alt="">
                      <span>Redmi X65 2022款</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/banner-list2.png" alt="">
                      <span>Redmi X65 2022款</span>
                    </a>
                  </li>
                </ul>
                <ul>
                  <!-- 一个ul里面存储多个小li -->
                  <li>
                    <a href="#">
                      <img src="./images/banner-list2.png" alt="">
                      <span>Redmi X65 2022款</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/banner-list2.png" alt="">
                      <span>Redmi X65 2022款</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/banner-list2.png" alt="">
                      <span>Redmi X65 2022款</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/banner-list2.png" alt="">
                      <span>Redmi X65 2022款</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/banner-list2.png" alt="">
                      <span>Redmi X65 2022款</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/banner-list2.png" alt="">
                      <span>Redmi X65 2022款</span>
                    </a>
                  </li>
                </ul>
                <ul>
                  <!-- 一个ul里面存储多个小li -->
                  <li>
                    <a href="#">
                      <img src="./images/banner-list2.png" alt="">
                      <span>Redmi X65 2022款</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/banner-list2.png" alt="">
                      <span>Redmi X65 2022款</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/banner-list2.png" alt="">
                      <span>Redmi X65 2022款</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/banner-list2.png" alt="">
                      <span>Redmi X65 2022款</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/banner-list2.png" alt="">
                      <span>Redmi X65 2022款</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/banner-list2.png" alt="">
                      <span>Redmi X65 2022款</span>
                    </a>
                  </li>
                </ul>
                <ul>
                  <!-- 一个ul里面存储多个小li -->
                  <li>
                    <a href="#">
                      <img src="./images/banner-list2.png" alt="">
                      <span>Redmi X65 2022款</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/banner-list2.png" alt="">
                      <span>Redmi X65 2022款</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/banner-list2.png" alt="">
                      <span>Redmi X65 2022款</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/banner-list2.png" alt="">
                      <span>Redmi X65 2022款</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/banner-list2.png" alt="">
                      <span>Redmi X65 2022款</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/banner-list2.png" alt="">
                      <span>Redmi X65 2022款</span>
                    </a>
                  </li>
                </ul>
              </div>
            </li>

            <!-- 第三个三级：右侧list中只有三个li，通过slide-list3控制 -->
            <li>
              <a href="#">笔记本 平板</a><i class="iconfont">&#xe616;</i>
              <div class="slide-list slide-list3">
                <ul>
                  <!-- 一个ul里面存储多个小li -->
                  <li>
                    <a href="#">
                      <img src="./images/banner-list2.png" alt="">
                      <span>Redmi X65 2022款</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/banner-list2.png" alt="">
                      <span>Redmi X65 2022款</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/banner-list2.png" alt="">
                      <span>Redmi X65 2022款</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/banner-list2.png" alt="">
                      <span>Redmi X65 2022款</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/banner-list2.png" alt="">
                      <span>Redmi X65 2022款</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/banner-list2.png" alt="">
                      <span>Redmi X65 2022款</span>
                    </a>
                  </li>
                </ul>
                <ul>
                  <!-- 一个ul里面存储多个小li -->
                  <li>
                    <a href="#">
                      <img src="./images/banner-list2.png" alt="">
                      <span>Redmi X65 2022款</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/banner-list2.png" alt="">
                      <span>Redmi X65 2022款</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/banner-list2.png" alt="">
                      <span>Redmi X65 2022款</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/banner-list2.png" alt="">
                      <span>Redmi X65 2022款</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/banner-list2.png" alt="">
                      <span>Redmi X65 2022款</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/banner-list2.png" alt="">
                      <span>Redmi X65 2022款</span>
                    </a>
                  </li>
                </ul>
                <ul>
                  <!-- 一个ul里面存储多个小li -->
                  <li>
                    <a href="#">
                      <img src="./images/banner-list2.png" alt="">
                      <span>Redmi X65 2022款</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/banner-list2.png" alt="">
                      <span>Redmi X65 2022款</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/banner-list2.png" alt="">
                      <span>Redmi X65 2022款</span>
                    </a>
                  </li>
                </ul>
              </div>
            </li>
            <!-- 第四个三级：右侧list中只有两个个li ，通过slide-list2控制-->
            <li>
              <a href="#">电源 配件</a><i class="iconfont">&#xe616;</i>
              <div class="slide-list slide-list2">
                <ul>
                  <!-- 一个ul里面存储多个小li -->
                  <li>
                    <a href="#">
                      <img src="./images/banner-list2.png" alt="">
                      <span>Redmi X65 2022款</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/banner-list2.png" alt="">
                      <span>Redmi X65 2022款</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/banner-list2.png" alt="">
                      <span>Redmi X65 2022款</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/banner-list2.png" alt="">
                      <span>Redmi X65 2022款</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/banner-list2.png" alt="">
                      <span>Redmi X65 2022款</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/banner-list2.png" alt="">
                      <span>Redmi X65 2022款</span>
                    </a>
                  </li>
                </ul>
                <ul>
                  <!-- 一个ul里面存储多个小li -->
                  <li>
                    <a href="#">
                      <img src="./images/banner-list2.png" alt="">
                      <span>Redmi X65 2022款</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/banner-list2.png" alt="">
                      <span>Redmi X65 2022款</span>
                    </a>
                  </li>
                </ul>
              </div>
            </li>
            <li><a href="#">手机</a><i class="iconfont">&#xe616;</i></li>
            <li><a href="#">手机</a><i class="iconfont">&#xe616;</i></li>
            <li><a href="#">手机</a><i class="iconfont">&#xe616;</i></li>
            <li><a href="#">手机</a><i class="iconfont">&#xe616;</i></li>
            <li><a href="#">手机</a><i class="iconfont">&#xe616;</i></li>
            <li><a href="#">手机</a><i class="iconfont">&#xe616;</i></li>
          </ul>
        </div>

      </div>
    </div>
  </div>
  <!-- banner结束 -->

  <!-- 4.ad开始 -->
  <div class="ad">
    <div class="wrap">
      <div class="ad-box">
        <div class="ad-aside">
          <li class="row col">
            <a href="#">
              <img src="./images/aside1.png" alt="">
              <p>保障服务</p>
            </a>
          </li>
          <li class="row col">
            <a href="#">
              <img src="./images/aside1.png" alt="">
              <p>企业团购</p>
            </a>
          </li>
          <li class="row">
            <a href="#">
              <img src="./images/aside1.png" alt="">
              <p>F码通道</p>
            </a>
          </li>
          <li class="col">
            <a href="#">
              <img src="./images/aside1.png" alt="">
              <p>米粉卡</p>
            </a>
          </li>
          <li class="col">
            <a href="#">
              <img src="./images/aside1.png" alt="">
              <p>以旧换新</p>
              </p>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="./images/aside1.png" alt="">
              <p>话费充值</p>
            </a>
          </li>
        </div>
        <div class="ad-img">
          <a href="#">
            <img src="./images/ad-img1.jpg" alt="">
          </a>
        </div>
        <div class="ad-img">
          <a href="#">
            <img src="./images/ad-img2.jpg" alt="">
          </a>
        </div>
        <div class="ad-img">
          <a href="#">
            <img src="./images/ad-img3.jpg" alt="">
          </a>
        </div>
      </div>

    </div>
  </div>
  <!-- ad结束 -->


  <!-- 5.主体开始 -->
  <div class="container">
    <div class="wrap">

      <!-- 5.1手机开始 -->
      <div class="phone">
        <div class="home-banner-box">
          <a href="#">
            <img src="./images/banner-ad1.png" alt="">
          </a>
        </div>
        <h2 class="home-banner-title">
          手机
          <a href="#" class="more">查看更多
            <i class="iconfont">&#xe658;</i>
          </a>
        </h2>
        <div class="phone-box">
          <!-- 左边大盒子 -->
          <div class="phone-box-aside">
            <a href="#">
              <img src="./images/phone-aside.png" alt="">
            </a>
          </div>
          <!-- 右边商品区域 -->
          <div class="box-list">
            <a href="#" class="goods-img">
              <img src="./images/phone-list1.png" alt="">
              <h3>Xiaomi 12S Ultra</h3>
              <p class="name">这真徕卡｜专业徕卡影像</p>
              <p class="price">
                <span>5999</span>
                <span>元起</span>
              </p>
            </a>
            <a href="#" class="goods-img">
              <img src="./images/phone-list1.png" alt="">
              <h3>Xiaomi 12S Ultra</h3>
              <p class="name">这真徕卡｜专业徕卡影像</p>
              <p class="price">
                <span>5999</span>
                <span>元起</span>
              </p>
            </a>
            <a href="#" class="goods-img">
              <img src="./images/phone-list2.png" alt="">
              <h3>Xiaomi 12S Ultra</h3>
              <p class="name">这真徕卡｜专业徕卡影像</p>
              <p class="price">
                <span>5999</span>
                <span>元起</span>
              </p>
            </a>
            <a href="#" class="goods-img">
              <img src="./images/phone-list4.png" alt="">
              <h3>Xiaomi 12S Ultra</h3>
              <p class="name">这真徕卡｜专业徕卡影像</p>
              <p class="price">
                <span>5999</span>
                <span>元起</span>
              </p>
            </a>
            <a href="#" class="goods-img">
              <img src="./images/phone-list1.png" alt="">
              <h3>Xiaomi 12S Ultra</h3>
              <p class="name">这真徕卡｜专业徕卡影像</p>
              <p class="price">
                <span>5999</span>
                <span>元起 </span>
                <span class="drop"> 7999元</span>
              </p>
            </a>
            <a href="#" class="goods-img">
              <img src="./images/phone-list5.png" alt="">
              <h3>Xiaomi 12S Ultra</h3>
              <p class="name">这真徕卡｜专业徕卡影像</p>
              <p class="price">
                <span>5999</span>
                <span>元起 </span>
                <span class="drop"> 7999元</span>
              </p>
            </a>
            <a href="#" class="goods-img">
              <img src="./images/phone-list6.png" alt="">
              <h3>Xiaomi 12S Ultra</h3>
              <p class="name">这真徕卡｜专业徕卡影像</p>
              <p class="price">
                <span>5999</span>
                <span>元起 </span>
                <span class="drop"> 7999元</span>
              </p>
            </a>
            <a href="#" class="goods-img">
              <img src="./images/phone-list7.png" alt="">
              <h3>Xiaomi 12S Ultra</h3>
              <p class="name">这真徕卡｜专业徕卡影像</p>
              <p class="price">
                <span>5999</span>
                <span>元起 </span>
                <span class="drop"> 7999元</span>
              </p>
            </a>
          </div>
        </div>
      </div>
      <!-- 手机结束 -->

      <!-- 5.2智能穿戴开始 -->
      <div class="watch">
        <h2 class="home-banner-title">
          智能穿戴
          <ul class="tab-list">
            <li>热门
              <div class="watch1">
                <div class="box-list">
                  <a href="#" class="goods-img">
                    <img src="./images/phone-list1.png" alt="">
                    <h3>Xiaomi 12S Ultra</h3>
                    <p class="name">这真徕卡｜专业徕卡影像</p>
                    <p class="price">
                      <span>5999</span>
                      <span>元起</span>
                    </p>
                  </a>
                  <a href="#" class="goods-img">
                    <img src="./images/phone-list1.png" alt="">
                    <h3>Xiaomi 12S Ultra</h3>
                    <p class="name">这真徕卡｜专业徕卡影像</p>
                    <p class="price">
                      <span>5999</span>
                      <span>元起</span>
                    </p>
                  </a>
                  <a href="#" class="goods-img">
                    <img src="./images/phone-list2.png" alt="">
                    <h3>Xiaomi 12S Ultra</h3>
                    <p class="name">这真徕卡｜专业徕卡影像</p>
                    <p class="price">
                      <span>5999</span>
                      <span>元起</span>
                    </p>
                  </a>
                  <a href="#" class="goods-img">
                    <img src="./images/phone-list4.png" alt="">
                    <h3>Xiaomi 12S Ultra</h3>
                    <p class="name">这真徕卡｜专业徕卡影像</p>
                    <p class="price">
                      <span>5999</span>
                      <span>元起</span>
                    </p>
                  </a>
                  <a href="#" class="goods-img">
                    <img src="./images/phone-list1.png" alt="">
                    <h3>Xiaomi 12S Ultra</h3>
                    <p class="name">这真徕卡｜专业徕卡影像</p>
                    <p class="price">
                      <span>5999</span>
                      <span>元起 </span>
                      <span class="drop"> 7999元</span>
                    </p>
                  </a>
                  <a href="#" class="goods-img">
                    <img src="./images/phone-list5.png" alt="">
                    <h3>Xiaomi 12S Ultra</h3>
                    <p class="name">这真徕卡｜专业徕卡影像</p>
                    <p class="price">
                      <span>5999</span>
                      <span>元起 </span>
                      <span class="drop"> 7999元</span>
                    </p>
                  </a>
                  <a href="#" class="goods-img">
                    <img src="./images/phone-list6.png" alt="">
                    <h3>Xiaomi 12S Ultra</h3>
                    <p class="name">这真徕卡｜专业徕卡影像</p>
                    <p class="price">
                      <span>5999</span>
                      <span>元起 </span>
                      <span class="drop"> 7999元</span>
                    </p>
                  </a>
                  <a href="#" class="goods-img">
                    <img src="./images/phone-list7.png" alt="">
                    <h3>Xiaomi 12S Ultra</h3>
                    <p class="name">这真徕卡｜专业徕卡影像</p>
                    <p class="price">
                      <span>5999</span>
                      <span>元起 </span>
                      <span class="drop"> 7999元</span>
                    </p>
                  </a>
                </div>
              </div>
            </li>
            <li>穿戴
              <div class="watch2">
              </div>
            </li>
          </ul>
        </h2>
        <div class="phone-box">
          <!-- 左边大盒子 -->
          <div class="phone-box-aside">
            <a href="#">
              <img src="./images/watch-aside.png" alt="">
            </a>
          </div>
          <!-- 右边商品区域 -->
          <div class="box-list">
            <a href="#" class="goods-img">
              <img src="./images/watch-list1.png" alt="">
              <h3>Xiaomi 12S Ultra</h3>
              <p class="name">这真徕卡｜专业徕卡影像</p>
              <p class="price">
                <span>5999</span>
                <span>元起</span>
              </p>
            </a>
            <a href="#" class="goods-img">
              <img src="./images/watch-list2.png" alt="">
              <h3>Xiaomi 12S Ultra</h3>
              <p class="name">这真徕卡｜专业徕卡影像</p>
              <p class="price">
                <span>5999</span>
                <span>元起</span>
              </p>
            </a>
            <a href="#" class="goods-img">
              <img src="./images/watch-list2.png" alt="">
              <h3>Xiaomi 12S Ultra</h3>
              <p class="name">这真徕卡｜专业徕卡影像</p>
              <p class="price">
                <span>5999</span>
                <span>元起</span>
              </p>
            </a>
            <a href="#" class="goods-img">
              <img src="./images/watch-list4.png" alt="">
              <h3>Xiaomi 12S Ultra</h3>
              <p class="name">这真徕卡｜专业徕卡影像</p>
              <p class="price">
                <span>5999</span>
                <span>元起</span>
              </p>
            </a>
            <a href="#" class="goods-img">
              <img src="./images/watch-list1.png" alt="">
              <h3>Xiaomi 12S Ultra</h3>
              <p class="name">这真徕卡｜专业徕卡影像</p>
              <p class="price">
                <span>5999</span>
                <span>元起 </span>
                <span class="drop"> 7999元</span>
              </p>
            </a>
            <a href="#" class="goods-img">
              <img src="./images/watch-list5.png" alt="">
              <h3>Xiaomi 12S Ultra</h3>
              <p class="name">这真徕卡｜专业徕卡影像</p>
              <p class="price">
                <span>5999</span>
                <span>元起 </span>
                <span class="drop"> 7999元</span>
              </p>
            </a>
            <a href="#" class="goods-img">
              <img src="./images/watch-list6.png" alt="">
              <h3>Xiaomi 12S Ultra</h3>
              <p class="name">这真徕卡｜专业徕卡影像</p>
              <p class="price">
                <span>5999</span>
                <span>元起 </span>
                <span class="drop"> 7999元</span>
              </p>
            </a>
            <a href="#" class="last-list">
              <div class="box2">
                <p class="big">浏览更多</p>
                <p class="small">电视影音</p>
                <i class="iconfont">&#xe62a;</i>
              </div>
            </a>
          </div>
        </div>
      </div>

      <!-- 5.3家电部分 -->
      <div class="elc">
        <h2 class="home-banner-title">
          家电
          <ul class="tab-list">
            <li>热门</li>
            <li>电视影音</li>
          </ul>
        </h2>
        <!-- 上面手机部分加了高，没有浮动影响，这里不加高度，学习如何解决浮动 -->
        <div class="ele-box">
          <!-- 家电左边部分 -->
          <div class="ele-left">
            <a href="#">
              <img src="./images/ele-aside1.png" alt="">
            </a>
            <a href="#" class="last">
              <img src="./images/ele-aside2.png" alt="">
            </a>
          </div>
          <!-- 家电右边部分 -->
          <div class="ele-right">
            <div class="box-list">
              <a href="#" class="goods-img">
                <img src="./images/ele-list1.png" alt="">
                <h3>Xiaomi 12S Ultra</h3>
                <p class="name">这真徕卡｜专业徕卡影像</p>
                <p class="price">
                  <span>5999</span>
                  <span>元起</span>
                </p>
              </a>
              <a href="#" class="goods-img">
                <img src="./images/ele-list1.png" alt="">
                <h3>Xiaomi 12S Ultra</h3>
                <p class="name">这真徕卡｜专业徕卡影像</p>
                <p class="price">
                  <span>5999</span>
                  <span>元起</span>
                </p>
              </a>
              <a href="#" class="goods-img">
                <img src="./images/ele-list2.png" alt="">
                <h3>Xiaomi 12S Ultra</h3>
                <p class="name">这真徕卡｜专业徕卡影像</p>
                <p class="price">
                  <span>5999</span>
                  <span>元起</span>
                </p>
              </a>
              <a href="#" class="goods-img">
                <img src="./images/ele-list3.png" alt="">
                <h3>Xiaomi 12S Ultra</h3>
                <p class="name">这真徕卡｜专业徕卡影像</p>
                <p class="price">
                  <span>5999</span>
                  <span>元起</span>
                </p>
              </a>
              <a href="#" class="goods-img">
                <img src="./images/ele-list1.png" alt="">
                <h3>Xiaomi 12S Ultra</h3>
                <p class="name">这真徕卡｜专业徕卡影像</p>
                <p class="price">
                  <span>5999</span>
                  <span>元起 </span>
                  <span class="drop"> 7999元</span>
                </p>
              </a>
              <a href="#" class="goods-img">
                <img src="./images/ele-list4.png" alt="">
                <h3>Xiaomi 12S Ultra</h3>
                <p class="name">这真徕卡｜专业徕卡影像</p>
                <p class="price">
                  <span>5999</span>
                  <span>元起 </span>
                  <span class="drop"> 7999元</span>
                </p>
              </a>
              <a href="#" class="goods-img">
                <img src="./images/ele-list3.png" alt="">
                <h3>Xiaomi 12S Ultra</h3>
                <p class="name">这真徕卡｜专业徕卡影像</p>
                <p class="price">
                  <span>5999</span>
                  <span>元起 </span>
                  <span class="drop"> 7999元</span>
                </p>
              </a>
              <!-- 最后一个盒子设置 -->
              <a href="#" class="last-list">
                <img src="./images/ele-min.png" alt="">
                <div class="box1">
                  <h3>小米电视 EA50 2022款</h3>
                  <p>1299元</p>
                </div>
              </a>
              <a href="#" class="last-list">
                <div class="box2">
                  <p class="big">浏览更多</p>
                  <p class="small">电视影音</p>
                  <i class="iconfont">&#xe62a;</i>
                </div>
              </a>
            </div>
          </div>
          <div class="clear1"></div>
        </div>
      </div>

      <!-- 5.4视频开始 -->
      <div class="vedio">
        <div class="wrap">
          <h2 class="home-banner-title">
            视频
            <a href="#" class="more">查看全部
              <i class="iconfont">&#xe658;</i>
            </a>
          </h2>
          <div class="vedio-box clear">
            <ul>
              <li class="first">
                <a href="#">
                  <img src="./images/vedio1.png" alt="">
                  <p class="vedio-big">2021年春季新品发布会第一场</p>
                  <p class="vedio-small">Redmi 10X系列发布会</p>
                  <!-- 播放按钮 -->
                  <span>
                    <div class="sanjiao"></div>
                  </span>
                </a>
              </li>
              <li>
                <a href="#">
                  <img src="./images/vedio2.png" alt="">
                  <p class="vedio-big">2021年春季新品发布会第一场</p>
                  <p class="vedio-small">Redmi 10X系列发布会</p>
                  <!-- 播放按钮 -->
                  <span>
                    <div class="sanjiao"></div>
                  </span>
                </a>
              </li>
              <li>
                <a href="#">
                  <img src="./images/vedio3.png" alt="">
                  <p class="vedio-big">2021年春季新品发布会第一场</p>
                  <p class="vedio-small">Redmi 10X系列发布会</p>
                  <!-- 播放按钮 -->
                  <span>
                    <div class="sanjiao"></div>
                  </span>
                </a>
              </li>
              <li>
                <a href="#">
                  <img src="./images/vedio4.png" alt="">
                  <p class="vedio-big">2021年春季新品发布会第一场</p>
                  <p class="vedio-small">Redmi 10X系列发布会</p>
                  <!-- 播放按钮 -->
                  <span>
                    <div class="sanjiao"></div>
                  </span>
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>

    </div>
  </div>
  <!-- 主体结束 -->

  <!-- 6.footer部分 -->
  <div class="footer">
    <div class="wrap">
      <div class="footer-service">
        <li><a href="#"><em class="iconfont">&#xe629;</em>预约维修服务</a></li>
        <li><a href="#"><em class="iconfont">&#xe606;</em>7天无理由退货</a></li>
        <li><a href="#"><em class="iconfont">&#xe606;</em>15天免费换货</a></li>
        <li><a href="#"><em class="iconfont">&#xe657;</em>满69元包邮</a></li>
        <li><a href="#"><em class="iconfont">&#xe64d;</em>1100余家售后网点</a></li>
      </div>
      <div class="footer-link">
        <dl>
          <dt></dt>
        </dl>
        <dl>
          <dt>选购指南</dt>
          <dd><a href="#">手机</a></dd>
          <dd><a href="#">电视</a></dd>
          <dd><a href="#">笔记本</a></dd>
          <dd><a href="#">平板</a></dd>
          <dd><a href="#">穿戴</a></dd>
          <dd><a href="#">耳机</a></dd>
          <dd><a href="#">家电</a></dd>
          <dd><a href="#">路由器</a></dd>
          <dd><a href="#">音箱</a></dd>
          <dd><a href="#">配件</a></dd>
        </dl>
        <dl>
          <dt>服务中心</dt>
          <dd><a href="#">申请售后</a></dd>
          <dd><a href="#">售后政策</a></dd>
          <dd><a href="#">维修服务价格</a></dd>
          <dd><a href="#">订单查询</a></dd>
          <dd><a href="#">以旧换新</a></dd>
          <dd><a href="#">保障服务</a></dd>
          <dd><a href="#">防伪查询</a></dd>
          <dd><a href="#">F码通道</a></dd>
        </dl>
        <dl>
          <dt>线下门店</dt>
          <dd><a href="#">小米之家</a></dd>
          <dd><a href="#">服务网点</a></dd>
          <dd><a href="#">授权体验店/专区</a></dd>
        </dl>
        <dl>
          <dt>关于小米</dt>
          <dd><a href="#">了解小米</a></dd>
          <dd><a href="#">加入小米</a></dd>
          <dd><a href="#">投资者关系</a></dd>
          <dd><a href="#">企业社会责任</a></dd>
          <dd><a href="#">廉洁举报</a></dd>
        </dl>
        <dl>
          <dt>关注我们</dt>
          <dd><a href="#">新浪微博</a></dd>
          <dd><a href="#">官方微信</a></dd>
          <dd><a href="#">联系我们</a></dd>
          <dd><a href="#">公益基金会</a></dd>
        </dl>
        <div class="footer-container">
          <p class="tel">400-100-5678</p>
          <p class="time">8:00-18:00 (仅收市话费)</p>
          <a href="#">
            <i class="iconfont">&#xe6ab;</i>
            人工客服
          </a>
        </div>
      </div>
    </div>
  </div>

  <!-- 7.info信息 -->
  <div class="info">
    <div class="wrap">
      <div class="info-container">
        <div class="logo">
          <img src="./images/logo1.png" alt="">
        </div>
        <div class="text">
          <p>
            <a href="#">小米商城</a>
            <a href="#">MIUI</a>
            <a href="#">米家</a>
            <a href="#">米聊</a>
            <a href="#">多看</a>
            <a href="#">游戏</a>
            <a href="#">政企服务</a>
            <a href="#">小米天猫店</a>
            <a href="#">小米集团隐私</a>
            <a href="#">小米公司儿童信息保护规则</a>
            <a href="#">小米商城隐私政策</a>
            <a href="#">小米商城用户协议</a>
            <a href="#">问题反馈</a>
            <a href="#">Select Location</a>
          </p>
          <p>
            <a href="#">北京互联网法院法律服务工作站</a>
            <a href="#">中国消费者协会</a>
            <a href="#">北京市消费者协会</a>
          </p>
          <p class="text-link">
            <a href="#">@mi.com</a>
            <a href="#"> 京ICP证110507号</a>
            <a href="#">京ICP备10046444号</a>
            <a href="#">京公网安备11010802020134号</a>
            <a href="#">京网文[2020]0276-042号</a>
            <br>
            <a href="#">（京）网械平台备字（2018）第00005号</a>
            <a href="#">互联网药品信息服务资格证 (京)-非经营性-2014-0090</a>
            <a href="#">营业执照</a>
            <a href="#">医疗器械质量公告</a>
            <br>
            <a href="#">增值电信业务许可证</a>
            <a href="#">网络食品经营备案 京食药网食备202010048</a>
            <a href="#">食品经营许可证</a>
            <br>
            <a href="#">违法和不良信息举报电话：171-5104-4404 </a>
            <a href="#">知识产权侵权投诉</a>
            <a href="#"> 本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</a>
          </p>
        </div>
        <div class="link">
          <img src="./images/link1.png" alt="">
          <img src="./images/link2.png" alt="">
          <img src="./images/link3.png" alt="">
          <img src="./images/link4.png" alt="">
          <img src="./images/link5.png" alt="">
        </div>
      </div>
      <div class="info-slogan">
        探索黑科技，小米为发烧而生
      </div>

    </div>
  </div>

</body>

</html>
